<template>
    <div ref="card">
        <webtopo-svg-preview
            style="height: 100vh"
            :dataModelId="dataModelId"
            :data-model="data_model"
            :canvas-drag="false"
        ></webtopo-svg-preview>
    </div>
</template>
<script setup>
import { ref, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const data_model = ref(
    route.query.dataModelId
        ? null
        : JSON.parse(localStorage.getItem('data_model'))
)
const dataModelId = ref(route.query.dataModelId || undefined)
const card = ref(null)
// const test = reactive({
//     data: [
//         {
//             id: 'powerAD4pUJrADX',
//             number: '',
//             value: 1,
//         },
//         {
//             id: 'powerndADABUAdr',
//             number: '',
//             value: 111,
//         },
//         {
//             id: 'powerzVvsqIWDOp',
//             number: '',
//             value: 3,
//         },
//     ],
// })
// const state = reactive({
//     timeInter: null, //定义定时器
// })
// state.timeInter = setInterval(() => {
//     for (let i = 0; i < data_model.value.done_json.length; i++) {
//         const rawData = data_model.value.done_json[i] //原始数据
//         const matchedData = test.data.find((item) => item.id === rawData.id) //匹配数据
//         if (matchedData) {
//             matchedData.value++
//             rawData.props.number.val = matchedData.value.toString()
//         }
//     }
// }, 5000)
// function setScale() {
//     if (screen.width >= 1920) {
//         card.value.children[0].children[0].children[0].style.transform =
//             'scaleY(1.14) scaleX(1.39) translate(-16%, 0.8%)'
//     } else {
//         card.value.children[0].children[0].children[0].style.transform =
//             'scaleY(0.88) scaleX(1.11) translate(-19.9%, 1%)'
//     }
// }
// onMounted(() => {
//     setScale()
//     window.addEventListener('resize', setScale, { passive: false })
// })
onUnmounted(() => {
    // clearInterval(state.timeInter) //销毁
    // state.timeInter = null
})
</script>
<style lang="scss">
::v-deep(.canvas) {
    height: 100vh !important;
}
</style>
